import React from 'react';
import {View, Image, Text, StyleSheet} from 'react-native';

const TypeStyles = StyleSheet.create({
  container: {
    width: 50,
    // height: 50,
    marginEnd: 10,
  },
  layoutBg: {
    width: 50,
    height: 30,
    backgroundColor: '#F0F0F0',
    borderRadius: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  typesImage: {
    width: 20,
    height: 25,
    resizeMode: 'contain',
  },
  title: {
    width: 50,
    height: 20,
    fontSize: 14,
    textAlign: 'center',
  },
});
export default function ZhiBoTypes(props) {
  return (
    <View style={TypeStyles.container}>
      <View style={TypeStyles.layoutBg}>
        <Image style={TypeStyles.typesImage} source={props.image} />
      </View>
      <View>
        <Text style={TypeStyles.title}>{props.title}</Text>
      </View>
    </View>
  );
}
